<template>
  <div class="ptz-control">
    <!-- 标题和摄像头信息同行 -->
    <div class="header-row">
      <div class="title">云台控制</div>
      <div class="camera-info" v-if="currentCamera">
        <span class="camera-name">{{ currentCamera.name }}</span>
        <el-tooltip :content="currentCamera.ip" placement="top">
          <span class="camera-ip">{{ currentCamera.ip }}</span>
        </el-tooltip>
      </div>
    </div>
    
    <div class="ptz df fdc aic" v-if="currentCamera && isPtzEnabled">
      <!-- 8方向控制 -->
      <div class="control">
        <div class="center"></div>
        
        <!-- 上 -->
        <div 
          :class="btnIdx == 2 ? 'upbtn btn active' : 'upbtn btn'"
          @mousedown="controlVideoEve(2)" 
          @mouseup="stopMove"
        >
          <div class="arrow arrow-up"></div>
        </div>
        
        <!-- 右上 -->
        <div 
          :class="btnIdx == 3 ? 'uprightbtn btn active' : 'uprightbtn btn'"
          @mousedown="controlVideoEve(3)" 
          @mouseup="stopMove"
        >
          <div class="arrow arrow-up-right"></div>
        </div>
        
        <!-- 右 -->
        <div 
          :class="btnIdx == 4 ? 'rightbtn btn active' : 'rightbtn btn'"
          @mousedown="controlVideoEve(4)" 
          @mouseup="stopMove"
        >
          <div class="arrow arrow-right"></div>
        </div>
        
        <!-- 右下 -->
        <div 
          :class="btnIdx == 5 ? 'rightdownbtn btn active' : 'rightdownbtn btn'"
          @mousedown="controlVideoEve(5)" 
          @mouseup="stopMove"
        >
          <div class="arrow arrow-down-right"></div>
        </div>
        
        <!-- 下 -->
        <div 
          :class="btnIdx == 6 ? 'downbtn btn active' : 'downbtn btn'"
          @mousedown="controlVideoEve(6)" 
          @mouseup="stopMove"
        >
          <div class="arrow arrow-down"></div>
        </div>
        
        <!-- 左下 -->
        <div 
          :class="btnIdx == 7 ? 'downleftbtn btn active' : 'downleftbtn btn'"
          @mousedown="controlVideoEve(7)" 
          @mouseup="stopMove"
        >
          <div class="arrow arrow-down-left"></div>
        </div>
        
        <!-- 左 -->
        <div 
          :class="btnIdx == 0 ? 'leftbtn btn active' : 'leftbtn btn'"
          @mousedown="controlVideoEve(0)" 
          @mouseup="stopMove"
        >
          <div class="arrow arrow-left"></div>
        </div>
        
        <!-- 左上 -->
        <div 
          :class="btnIdx == 1 ? 'leftupbtn btn active' : 'leftupbtn btn'"
          @mousedown="controlVideoEve(1)" 
          @mouseup="stopMove"
        >
          <div class="arrow arrow-up-left"></div>
        </div>
      </div>
      
      <!-- 聚焦控制 -->
      <div class="control-row">
        <button class="control-btn" @mousedown="focusOut" @mouseup="stopMove">+</button>
        <span class="control-label">聚焦</span>
        <button class="control-btn" @mousedown="focusIn" @mouseup="stopMove">-</button>
      </div>
      
      <!-- 缩放控制 -->
      <div class="control-row">
        <button class="control-btn" @mousedown="scaleIn" @mouseup="stopMove">+</button>
        <span class="control-label">缩放</span>
        <button class="control-btn" @mousedown="scaleOut" @mouseup="stopMove">-</button>
      </div>
      
      <!-- 云台速度 -->
      <div class="speed-row">
        <span class="speed-label">云台速度</span>
        <span class="speed-text">快</span>
        <el-slider v-model="value" :min="1" :max="100" class="speed-slider" />
        <span class="speed-text">慢</span>
      </div>
    </div>
    
    <!-- 无摄像头提示 -->
    <div v-else class="no-camera">
      <el-icon class="no-camera-icon"><VideoCamera /></el-icon>
      <p class="no-camera-text">请先选择一个摄像头进行控制</p>
    </div>
    
    <!-- 当摄像头不支持云台控制时显示提示 -->
    <div v-if="currentCamera && !isPtzEnabled" class="ptz-disabled-message">
      <el-icon><VideoCamera /></el-icon>
      <span>该摄像头不支持云台控制</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import {
  ElSlider,
  ElIcon
} from 'element-plus'
import { info } from '@/utils/toast'
import {
  VideoCamera
} from '@element-plus/icons-vue'

// 接口定义
interface Camera {
  id: string
  name: string
  ip: string
  status: 'online' | 'offline'
  url?: string
  ptzEnable?: boolean  // 是否支持云台控制
}

// Props
interface Props {
  camera?: Camera | null
}

const props = withDefaults(defineProps<Props>(), {
  camera: null
})

// Emits
const emit = defineEmits<{
  'ptz-command': [command: number, params?: any]
  'preset-change': [preset: any]
}>()

// 响应式数据
const currentCamera = ref<Camera | null>(props.camera)
const btnIdx = ref(-1) // 当前按下的按钮索引
const value = ref(50) // 云台速度值


// 计算属性
const isOnline = computed(() => {
  return currentCamera.value?.status === 'online'
})

const isPtzEnabled = computed(() => {
  return currentCamera.value?.ptzEnable === true
})

// 监听摄像头变化
watch(() => props.camera, (newCamera) => {
  currentCamera.value = newCamera
}, { immediate: true })

// 8方向控制方法
const controlVideoEve = (direction: number) => {
  if (!isOnline.value || !isPtzEnabled.value) return
  
  btnIdx.value = direction
  
  const directionMap = {
    0: 0, // PTZ_DIRECTION_LEFT
    1: 1, // PTZ_DIRECTION_LEFTUP
    2: 2, // PTZ_DIRECTION_UP
    3: 3, // PTZ_DIRECTION_RIGHTUP
    4: 4, // PTZ_DIRECTION_RIGHT
    5: 5, // PTZ_DIRECTION_RIGHTDOWN
    6: 6, // PTZ_DIRECTION_DOWN
    7: 7  // PTZ_DIRECTION_LEFTDOWN
  }
  
  const command = directionMap[direction as keyof typeof directionMap]
  const params = { speed: value.value }
  
  // 发送移动命令
  emit('ptz-command', command, {...params, ...currentCamera.value})
  
  // const directionNames = {
  //   0: '左移',
  //   1: '左上移动',
  //   2: '上移',
  //   3: '右上移动',
  //   4: '右移',
  //   5: '右下移动',
  //   6: '下移',
  //   7: '左下移动'
  // }
  
  // info(`开始${directionNames[direction as keyof typeof directionNames]}`)
}

// 停止移动
const stopMove = () => {
  btnIdx.value = -1
  emit('ptz-command', 20, {...currentCamera.value, speed: value.value}) // PTZ_STOP
}

// 聚焦控制
const focusIn = () => {
  if (!isOnline.value || !isPtzEnabled.value) return
  
  emit('ptz-command', 11, {...currentCamera.value, speed: value.value}) // PTZ_FOCUS_NEAR
  info('调节近焦')
}

const focusOut = () => {
  if (!isOnline.value || !isPtzEnabled.value) return
  
  emit('ptz-command', 10, {...currentCamera.value, speed: value.value}) // PTZ_FOCUS_FAR
  info('调节远焦')
}

// 缩放控制
const scaleIn = () => {
  if (!isOnline.value || !isPtzEnabled.value) return
  
  emit('ptz-command', 8, {...currentCamera.value, speed: value.value}) // PTZ_ZOOM_IN
  info('开始放大')
}

const scaleOut = () => {
  if (!isOnline.value || !isPtzEnabled.value) return
  
  emit('ptz-command', 9, {...currentCamera.value, speed: value.value}) // PTZ_ZOOM_OUT
  info('开始缩小')
}

</script>

<style scoped>
/* 公共样式类 */
.df {
  display: flex;
}

.fdc {
  flex-direction: column;
}

.aic {
  align-items: center;
}

.ptz-control {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
}

/* 标题和摄像头信息同行 */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 摄像头信息样式 */
.camera-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.camera-name {
  font-size: 12px;
  font-weight: 500;
  color: #2c3e50;
  white-space: nowrap;
}

.camera-ip {
  font-size: 11px;
  color: #7f8c8d;
  font-family: 'Courier New', monospace;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ptz {
  gap: 12px;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* 8方向控制器样式 - 全新设计 */
.control {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  background: #f8fafc;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.control:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.center:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn {
  position: absolute;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.btn:hover {
  background: #f8fafc;
  border-color: #3b82f6;
  border-width: 3px;
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

.btn.active {
  background: #3b82f6;
  border-color: #1d4ed8;
  border-width: 3px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* 箭头样式 - 简化设计 */
.arrow {
  width: 0;
  height: 0;
  transition: all 0.2s ease;
}

.btn:hover .arrow {
  opacity: 0.8;
}

.btn.active .arrow {
  opacity: 1;
}

.arrow-up {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #64748b;
}

.arrow-down {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #64748b;
}

.arrow-left {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid #64748b;
}

.arrow-right {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #64748b;
}

.arrow-up-left {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #64748b;
  transform: rotate(-45deg);
}

.arrow-up-right {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #64748b;
  transform: rotate(45deg);
}

.arrow-down-left {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #64748b;
  transform: rotate(45deg);
}

.arrow-down-right {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #64748b;
  transform: rotate(-45deg);
}

/* 激活状态下的箭头颜色 */
.btn.active .arrow-up,
.btn.active .arrow-down,
.btn.active .arrow-left,
.btn.active .arrow-right,
.btn.active .arrow-up-left,
.btn.active .arrow-up-right,
.btn.active .arrow-down-left,
.btn.active .arrow-down-right {
  border-color: transparent transparent #ffffff transparent;
}

.btn.active .arrow-down {
  border-color: #ffffff transparent transparent transparent;
}

.btn.active .arrow-left {
  border-color: transparent #ffffff transparent transparent;
}

.btn.active .arrow-right {
  border-color: transparent transparent transparent #ffffff;
}

/* 8个方向按钮定位 - 使用精确的数学计算，确保均匀分布 */
.upbtn {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.uprightbtn {
  top: 32px;
  right: 32px;
}

.rightbtn {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.rightdownbtn {
  bottom: 32px;
  right: 32px;
}

.downbtn {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.downleftbtn {
  bottom: 32px;
  left: 32px;
}

.leftbtn {
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}

.leftupbtn {
  top: 32px;
  left: 32px;
}

/* 控制行样式 - 匹配截图 */
.control-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 6px 0;
}

.control-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.control-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.control-btn:active {
  background: #f0f8ff;
}

.control-label {
  font-size: 14px;
  color: #333;
  min-width: 24px;
  text-align: center;
  font-weight: 500;
}

/* 速度控制样式 - 匹配截图 */
.speed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
  width: 100%;
}

.speed-label {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  font-weight: 500;
}

.speed-text {
  font-size: 14px;
  color: #333;
  min-width: 16px;
}

.speed-slider {
  flex: 1;
  max-width: 120px;
}

/* 无摄像头提示样式 */
.no-camera {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.no-camera-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #c0c4cc;
}

.no-camera-text {
  font-size: 14px;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .control {
    width: 160px;
    height: 160px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }
  
  .center {
    width: 28px;
    height: 28px;
    box-shadow: 
      0 2px 6px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  
  .btn {
    width: 28px;
    height: 28px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* 调整小屏幕下的按钮位置 */
  .upbtn {
    top: 6px;
  }
  
  .uprightbtn {
    top: 28px;
    right: 28px;
  }
  
  .rightbtn {
    right: 6px;
  }
  
  .rightdownbtn {
    bottom: 28px;
    right: 28px;
  }
  
  .downbtn {
    bottom: 6px;
  }
  
  .downleftbtn {
    bottom: 28px;
    left: 28px;
  }
  
  .leftbtn {
    left: 6px;
  }
  
  .leftupbtn {
    top: 28px;
    left: 28px;
  }
  
  .control-btn {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .control {
    width: 140px;
    height: 140px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .center {
    width: 24px;
    height: 24px;
    box-shadow: 
      0 1px 4px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  
  .btn {
    width: 24px;
    height: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  /* 调整最小屏幕下的按钮位置 */
  .upbtn {
    top: 4px;
  }
  
  .uprightbtn {
    top: 24px;
    right: 24px;
  }
  
  .rightbtn {
    right: 4px;
  }
  
  .rightdownbtn {
    bottom: 24px;
    right: 24px;
  }
  
  .downbtn {
    bottom: 4px;
  }
  
  .downleftbtn {
    bottom: 24px;
    left: 24px;
  }
  
  .leftbtn {
    left: 4px;
  }
  
  .leftupbtn {
    top: 24px;
    left: 24px;
  }
  
  .control-btn {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  
  .title {
    font-size: 12px;
  }
  
  .ptz {
    gap: 8px;
  }
}

/* 云台控制禁用提示样式 */
.ptz-disabled-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #909399;
  font-size: 14px;
  gap: 12px;
}

.ptz-disabled-message .el-icon {
  font-size: 48px;
  color: #c0c4cc;
}
</style>